<!-- 出入院运行指标 -->
<template>
    <div class="operationIndex-parent">
        <div id="operationIndex"></div>
        <div v-for="(item, index) in name" :key="index" class="operationIndex-item">
            {{ item }}
        </div>
    </div>
</template>
<script>
import * as echarts from "echarts";
import { getOperationIndexData } from "../../commonJs/data";
import Mock from 'mockjs'
export default {
    data() {
        return {
            name: ["人民医院", "二院", "中医院", "乡镇卫生院"],
        };
    },
    mounted() {
        // getOperationIndexData(this.setEcharts);
        this.setEcharts()
    },
    methods: {
        //设置echarts
        setEcharts() {
            var data = {
                area: ["1", "2", "3", "4", "5"],
                legend: ["入院人数", "出院人数", "住院手术人数"],
                data: [
                    // 每列值
                    [],
                    [],
                    [],
                    [],
                ],
            };
            let responseData = [{ VALUE1: Mock.Random.integer(2000, 3000), VALUE2: Mock.Random.integer(2000, 3000), VALUE3: Mock.Random.integer(1000, 1500) },
            { VALUE1: Mock.Random.integer(2000, 3000), VALUE2: Mock.Random.integer(2000, 3000), VALUE3: Mock.Random.integer(1000, 1500) },
            { VALUE1: Mock.Random.integer(2000, 3000), VALUE2: Mock.Random.integer(2000, 3000), VALUE3: Mock.Random.integer(1000, 1500) },
            { VALUE1: Mock.Random.integer(500, 1000), VALUE2: Mock.Random.integer(500,1000), VALUE3: Mock.Random.integer(100,500) },
            ]
            var calcMaxArray = [0, 0, 0, 0];
            responseData.forEach((item) => {
                if (!item.VALUE1) {
                    item.VALUE1 = 0;
                }
                if (!item.VALUE2) {
                    item.VALUE2 = 0;
                }
                if (!item.VALUE3) {
                    item.VALUE3 = 0;
                }
                data.data[0].unshift(parseInt(item.VALUE1));
                data.data[1].unshift(parseInt(item.VALUE2));
                data.data[2].unshift(parseInt(item.VALUE3));
                calcMaxArray[0] += parseInt(item.VALUE1);
                calcMaxArray[1] += parseInt(item.VALUE2);
                calcMaxArray[2] += parseInt(item.VALUE3);
            });
            const pic1 = require("../../assets/image/chartList/in.png");
            const pic2 = require("../../assets/image/chartList/out.png");
            const pic3 = require("../../assets/image/chartList/operation.png");
            // 获取canvas宽度，计算图片位置
            let operationIndex = echarts.init(
                document.getElementById("operationIndex")
            );
            // 获取canvas宽度，计算图片位置
            const picList = [
                {
                    name: "入院人数",
                    pic: pic1,
                },
                {
                    name: "出院人数",
                    pic: pic2,
                },
                {
                    name: "住院手术人数",
                    pic: pic3,
                },
            ];
            // 每列最大值

            var leftList = [100, 237, 366];

            // 添0，顶上，让右下网格顶上，颜色叠加效果
            data.area.push(0);
            data.data.push(0);
            // 右下网格左右留白，右下x轴设置最大80，每20一个间隔，将数值全部转化成20内
            var emptyData = data.data.map(() => {
                return [2, 2, 2, 2, 2];
            });

            // graphic图片初始化
            var optionElements = picList.map((item, index) => {
                // 计算图片位置
                return {
                    type: "group",
                    // 详情一列宽度 20.75%
                    left: leftList[index],
                    top: "6%",
                    children: [
                        {
                            type: "image",
                            style: {
                                image: item.pic,
                                width: 30,
                                height: 30,
                            },
                        },
                        {
                            type: "text",
                            style: {
                                text: item.name,
                                // 图标无法给百分比，故文字与图标写死位置，待寻找更好方案
                                y: 10,
                                x: 35,
                                fill: "#fff",
                                textShadowColor: "#00EAFF",
                                textShadowBlur: 8,
                                fontSize: 16,
                            },
                        },
                    ],
                };
            });

            // 将每列的值按每列最大值比例转化成20内的数据
            var turnData = calcMaxArray.map((max, index) => {
                return data.data[index].map((item) => {
                    return {
                        value: (item * 16) / max > 16 ? 16 : (item * 16) / max,
                        name: "123",
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(
                                1,
                                0,
                                0,
                                0,
                                [
                                    {
                                        offset: 0,
                                        color: "rgba(0, 204, 255, 1)",
                                    },
                                    {
                                        offset: 1,
                                        color: "rgba(101, 105, 255, 1)",
                                    },
                                ]
                            ),
                            barBorderRadius: [
                                5,
                                item === max ? 5 : 0,
                                item === max ? 5 : 0,
                                5,
                            ],
                        },
                    };
                });
            });
            // 将计算转换20内得出的结果用20减去，模拟柱最大值背景
            var restData = turnData.map((item, index) => {
                return item.map((item, id) => {
                    return {
                        total: calcMaxArray[index],
                        current: data.data[index] && data.data[index][id],
                        value: 16 - item.value > 16 ? 16 : 16 - item.value,
                        name: data[id % data.data.length],
                        itemStyle: {
                            color: "rgba(59, 126, 170, 0.3)",
                            barBorderRadius: [
                                item.value == 0 ? 5 : 0,
                                5,
                                5,
                                item.value == 0 ? 5 : 0,
                            ],
                        },
                    };
                });
            });
            // 柱图黄色箭头
            var markPointData = turnData.map((item, index) => {
                let b = item.map((it, id) => {
                    let a = {
                        name: 1,
                        value: 1,
                        xAxis: 20 * index + 2 + it.value,
                        yAxis: data.area[parseInt(id % data.area.length)],
                        label: {
                            position: "right",
                            show: true,
                            offset: [0, 0],
                            formatter: () => {
                                return `{trangle|▼}`;
                            },
                            rich: {
                                line: {
                                    color: "rgba(28, 234, 246, 0.3)",
                                },
                                trangle: {
                                    fontSize: 12,
                                    color: "#FFFB8F",
                                    lineHeight: 10,
                                    padding: [20, 0, 0, -14],
                                    textShadowBlur: 15,
                                    textShadowColor: "#FFFB8F",
                                },
                            },
                        },
                    };
                    return a;
                });
                return b;
            });
            // 柱数值展示
            var markPointData2 = turnData.map((item, index) => {
                let b = item.map((it, id) => {
                    let a = {
                        name: 1,
                        value: 1,
                        current: data.data[index][id],
                        xAxis: 10 + 20 * index,
                        yAxis: data.area[parseInt(id % data.area.length)],
                        label: {
                            offset: [-30, 0],
                            position: "right",
                            show: true,
                            formatter: (params) => {
                                return `{current|${params.data.current + '人'}}`;
                            },
                            rich: {
                                current: {
                                    fontSize: 18,
                                    color: "#FFFFFF",
                                    align: "top",
                                    width: 100,
                                    padding: [55, 0, 0, 10],
                                },
                            },
                        },
                    };
                    return a;
                });
                return b;
            });

            var option = {
                tooltip: {
                    show: false,
                },
                // 网格设置
                grid: [
                    {
                        top: "3%",
                        height: "15%",
                        left: "18%",
                        right: "2%",
                        show: true,
                        borderColor: "transparent",
                    },
                    {
                        top: "1%",

                        left: "3%",
                        width: "12%",
                        show: false,
                        borderColor: "transparent",
                    },
                    {
                        top: "0%",

                        left: "17%",
                        right: "2%",
                    },
                ],
                // x轴
                xAxis: [
                    {
                        gridIndex: 0,
                        type: "value",
                        show: true,
                        axisLine: {
                            lineStyle: {
                                color: "rgba(10, 132, 197, 1)",
                            },
                        },
                    },
                    {
                        gridIndex: 1,
                        type: "value",
                        show: false,
                    },
                    {
                        gridIndex: 2,
                        type: "value",
                        axisLabel: {
                            show: false,
                        },
                        axisLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        splitArea: {
                            show: false,
                        },
                        splitLine: {
                            show: false,
                        },
                    },
                ],
                // y轴
                yAxis: [
                    {
                        gridIndex: 0,
                        type: "category",
                        show: false,
                    },
                    {
                        gridIndex: 1,
                        type: "category",
                        show: true,
                        data: data.area,
                        splitArea: {
                            show: true,
                            areaStyle: {
                                color: "transparent",
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLabel: {
                            show: false,
                        },
                        axisLine: {
                            show: false,
                        },
                    },
                    {
                        gridIndex: 2,
                        show: true,
                        type: "category",
                        data: data.area,
                        axisTick: {
                            show: false,
                        },
                        axisLabel: {
                            show: false,
                        },
                        axisLine: {
                            show: false,
                        },

                        splitLine: {
                            show: false,
                            lineStyle: {
                                color: "rgba(28, 234, 246, 0.3)",
                                type: "dashed",
                            },
                        },
                    },
                ],
                series: [],
            };
            for (var i = 0; i < data.legend.length; i++) {
                // ←左间隔
                option.series.push({
                    xAxisIndex: 2,
                    yAxisIndex: 2,
                    name: data.legend[i],
                    type: "bar",
                    stack: "总量",
                    barWidth: 10,
                    label: {
                        show: false,
                    },
                    itemStyle: {
                        barBorderRadius: 5,
                        color: "transparent",
                    },
                    data: emptyData[i],
                });
                // 左边有颜色柱
                option.series.push({
                    xAxisIndex: 2,
                    yAxisIndex: 2,
                    name: data.legend[i],
                    type: "bar",
                    stack: "总量",
                    barWidth: 10,
                    label: {
                        show: false,
                    },
                    markPoint: {
                        silent: true,
                        symbolSize: 0.01,
                        data: [
                            ...markPointData[0],
                            ...markPointData[1],
                            ...markPointData[2],
                            ...markPointData[3],
                        ],
                    },
                    data: turnData[i],
                });
                // 右边背景柱
                option.series.push({
                    xAxisIndex: 2,
                    yAxisIndex: 2,
                    name: data.legend[i],
                    type: "bar",
                    stack: "总量",
                    barWidth: 10,
                    label: {
                        show: false,
                    },
                    data: restData[i],
                    markPoint: {
                        silent: true,
                        symbolSize: 0.01,
                        data: [
                            ...markPointData2[0],
                            ...markPointData2[1],
                            ...markPointData2[2],
                            ...markPointData2[3],
                        ],
                    },
                });
                // →右间隔
                option.series.push({
                    xAxisIndex: 2,
                    yAxisIndex: 2,
                    name: data.legend[i],
                    type: "bar",
                    stack: "总量",
                    barWidth: 10,
                    label: {
                        show: false,
                    },
                    itemStyle: {
                        barBorderRadius: 5,
                        color: "transparent",
                    },
                    data: emptyData[i],
                });
            }
            option.graphic = {
                elements: optionElements,
            };
            operationIndex.setOption(option);
        },
    },
};
</script>
<style lang="scss" scoped>
.operationIndex-parent {
    width: 100%;
    height: 100%;
    position: relative;

    #operationIndex {
        width: 100%;
        height: 100%;
    }

    .operationIndex-item {
        position: absolute;
        color: #fff;
        font-size: 18px;
        top: 95px;
    }

    .operationIndex-item:nth-child(3) {
        top: 140px;
    }

    .operationIndex-item:nth-child(4) {
        top: 190px;
    }

    .operationIndex-item:nth-child(5) {
        top: 235px;
    }

    //.operationIndex-item:nth-child(6) {
    //top: 295px;
    //}
}
</style>